<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花龙腾航 - 航班编辑</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

    body {
      font-family: 'Noto Sans SC', sans-serif;
      background-color: #f8fafc;
    }

    .logo-text {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }

    .tab-active {
      position: relative;
      color: #3b82f6;
      font-weight: 600;
    }

    .tab-active:after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background: #3b82f6;
      border-radius: 3px 3px 0 0;
    }

    .user-avatar {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    }

    .admin-badge {
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: white;
      font-size: 0.7rem;
      padding: 0.2rem 0.5rem;
      border-radius: 9999px;
      font-weight: 600;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      min-width: 200px;
      z-index: 10;
    }

    .dropdown-menu.open {
      display: block;
    }

    .dropdown-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .dropdown-item:hover {
      background-color: #f3f4f6;
    }

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 20;
      justify-content: center;
      align-items: center;
    }

    .modal.open {
      display: flex;
    }

    .modal-content {
      background-color: white;
      border-radius: 0.5rem;
      width: 90%;
      max-width: 800px;
      max-height: 90vh;
      overflow-y: auto;
      animation: modalFadeIn 0.3s ease-out;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .seat-map {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .seat {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .seat.available {
      background-color: #e5e7eb;
      color: #374151;
    }

    .seat.available:hover {
      background-color: #d1d5db;
    }

    .seat.selected {
      background-color: #3b82f6;
      color: white;
    }

    .seat.booked {
      background-color: #ef4444;
      color: white;
      cursor: not-allowed;
    }

    .seat.vip {
      background-color: #8b5cf6;
      color: white;
    }

    .seat.vip:hover {
      background-color: #7c3aed;
    }

    .flight-info-card {
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .flight-info-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .status-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .airplane-icon {
      transform: rotate(90deg);
      color: #3b82f6;
    }

    .highlight {
      background-color: #FEF3C7;
      transition: background-color 0.3s;
    }

    .fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .flight-detail {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }

    .flight-detail.open {
      max-height: 500px;
    }

    .date-picker {
      position: relative;
    }

    .date-picker input {
      padding-right: 2.5rem;
    }

    .date-picker i {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: #6b7280;
    }

    .search-box {
      position: relative;
    }

    .search-box i {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
    }

    .search-box input {
      padding-left: 2.5rem;
    }

    .stats-card {
      transition: all 0.3s ease;
      border-radius: 0.75rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .stats-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-10">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fas fa-plane text-3xl text-blue-500"></i>
      <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="manager_index1" class="text-gray-600 hover:text-blue-500">主页</a>
      <a href="manager_flight_search1" class="text-gray-600 hover:text-blue-500">航班查询</a>
      <a href="manager_order" class="text-gray-600 hover:text-blue-500">订单管理</a>
      <a href="manager_flight" class="text-blue-500 font-medium">航班管理</a>
      <a href="manager_report" class="text-gray-600 hover:text-blue-500">报表统计</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <i class="fas fa-bell text-gray-500 text-xl cursor-pointer hover:text-blue-500"></i>
        <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
      </div>
      <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
        <div class="h-8 w-8 rounded-full user-avatar flex items-center justify-center text-white">
          <i class="fas fa-user-shield"></i>
        </div>
        <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${managername}">管理员</span>
        <div class="dropdown-menu" id="dropdown-menu">
          <div class="border-t border-gray-200 my-1"></div>
          <div class="dropdown-item text-red-500" onclick="location.href='manager_logout'">
            <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
  <div class="flex flex-col space-y-6">
    <!-- Breadcrumb -->
    <div class="flex items-center text-sm text-gray-600">
      <a href="manager_flight" class="text-blue-500 hover:underline">航班管理</a>
      <i class="fas fa-chevron-right mx-2 text-xs text-gray-400"></i>
      <span>编辑航班</span>
    </div>

    <!-- Flight Info Card -->
    <div class="flight-info-card bg-white rounded-xl shadow-sm overflow-hidden fade-in">
      <div class="p-6 border-b border-gray-100">
        <div class="flex justify-between items-start">
          <div>
            <div class="flex items-center space-x-3 mb-2">
              <span class="font-medium text-gray-700" th:text="'航班号: '+${flight.getFlight_id()}">航班号: HL888</span>
              <span class="text-gray-400">|</span>
              <span class="text-gray-500" th:text="${flight.getDeparture_date()}+' '+${flight.getDeparture_day()}">2023年11月15日</span>
            </div>
            <span class="status-badge"
                  th:classappend="${flight.getStatus() == '计划中'} ? 'bg-green-100 text-green-800' :
                                                 (${flight.getStatus() == '登机中'} ? 'bg-yellow-100 text-yellow-800' :
                                                 (${flight.getStatus() == '已起飞'} ? 'bg-blue-100 text-blue-800' :
                                                 (${flight.getStatus() == '已延误'} ? 'bg-orange-100 text-orange-800' :
                                                 (${flight.getStatus() == '已取消'} ? 'bg-red-100 text-red-800' :
                                                 'bg-purple-100 text-purple-800'))))"
                  th:text="${flight.getStatus()}">计划中
                            </span>
          </div>
          <div class="text-right">
            <div class="text-xl font-bold text-blue-600" th:text="'¥'+${flight.getEconomy_price()}+'(经济舱)&nbsp;&nbsp;'+'¥'+${flight.getBusiness_price()}+'(商务舱)&nbsp;&nbsp;'+'¥'+${flight.getFirst_price()}+'(头等舱)'">¥1280</div>
            <div class="text-sm text-gray-500" th:text="'剩余座位: '+'头等舱('+${flight.getFirst_space()}+'/'+${flight.getFirst_seat()}+')'+'&nbsp;&nbsp;商务舱('+${flight.getBusiness_space()}+'/'+${flight.getBusiness_seat()}+')'+'&nbsp;&nbsp;经济舱('+${flight.getEconomy_space()}+'/'+${flight.getEconomy_seat()}+')'">剩余座位: 42</div>
          </div>
        </div>

        <div class="mt-4 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <div class="text-center">
              <div class="text-xl font-bold" th:text="${flight.getDeparture_city()}">北京</div>
              <div class="text-xs text-gray-500" th:text="${flight.getDeparture_airport()}">(PEK)</div>
            </div>
            <div class="flex flex-col items-center">
              <div class="text-sm text-gray-500" th:text="${flight.getDeparture_time()}">08:30</div>
              <div class="my-1 airplane-icon">
                <i class="fas fa-plane"></i>
              </div>
              <div class="text-sm text-gray-500" th:text="${flight.getArrival_time()}">10:45</div>
            </div>
            <div class="text-center">
              <div class="text-xl font-bold" th:text="${flight.getArrival_city()}">上海</div>
              <div class="text-xs text-gray-500" th:text="${flight.getArrival_airport()}">(SHA)</div>
            </div>
          </div>
          <div class="text-sm text-gray-500">
            <i class="fas fa-plane mr-1"></i>
            <span class="text-gray-500" th:text="${flight.getP_model()}"></span>
          </div>
        </div>

        <div class="mt-4 flex justify-between items-center border-t border-gray-100 pt-4">
          <div>
            <div class="text-xs text-gray-600">
              <i class="fas fa-info-circle mr-1"></i>
              <span class="text-sm text-gray-500" th:text="'预计飞行时间: '+${flight.getDuration()}"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Form -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
      <div class="p-6 border-b border-gray-100">
        <h2 class="text-xl font-bold text-gray-800">编辑航班信息</h2>
        <p class="text-sm text-gray-500">修改航班详细信息</p>
      </div>

      <div class="p-6">
        <form id="editFlightForm" method="post" action="manager_edit_flight">
          <input type="hidden" name="flightId" th:value="${flight.getFlight_id()}">

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Flight Basic Info -->
            <div class="md:col-span-2">
              <h3 class="text-lg font-medium text-gray-800 mb-4 border-b pb-2">基本信息</h3>
            </div>

            <div>
              <label for="flightStatus" class="block text-sm font-medium text-gray-700 mb-1">航班状态</label>
              <select name="status" id="flightStatus" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" required>
                <option value="计划中" th:selected="${flight.getStatus()} == '计划中'">计划中</option>
                <option value="登机中" th:selected="${flight.getStatus()} == '登机中'">登机中</option>
                <option value="已起飞" th:selected="${flight.getStatus()} == '已起飞'">已起飞</option>
                <option value="已延误" th:selected="${flight.getStatus()} == '已延误'">已延误</option>
                <option value="已取消" th:selected="${flight.getStatus()} == '已取消'">已取消</option>
                <option value="已到达" th:selected="${flight.getStatus()} == '已到达'">已到达</option>
              </select>
            </div>

            <div>
              <label for="gateNumber" class="block text-sm font-medium text-gray-700 mb-1">登机口</label>
              <input name="gate" type="text" id="gateNumber" th:value="${flight.getGate()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="例如: A12">
            </div>

            <div>
              <label for="departureDate" class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
              <input name="departureDate" type="date" id="departureDate" th:value="${flight.getDeparture_date()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="arrivalDate" class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
              <input name="arrivalDate" type="date" id="arrivalDate" th:value="${flight.getArrival_date()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="departureTime" class="block text-sm font-medium text-gray-700 mb-1">出发时间</label>
              <input name="departureTime" type="time" id="departureTime" th:value="${flight.getDeparture_time()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="arrivalTime" class="block text-sm font-medium text-gray-700 mb-1">到达时间</label>
              <input name="arrivalTime" type="time" id="arrivalTime" th:value="${flight.getArrival_time()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="distance" class="block text-sm font-medium text-gray-700 mb-1">飞行距离</label>
              <input name="distance" type="number" id="distance" th:value="${flight.getDistance()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="km" required>
            </div>

            <!-- Pricing -->
            <div class="md:col-span-2">
              <h3 class="text-lg font-medium text-gray-800 mb-4 border-b pb-2">价格设置</h3>
            </div>

            <div>
              <label for="economyPrice" class="block text-sm font-medium text-gray-700 mb-1">经济舱价格</label>
              <input name="economyPrice" type="number" id="economyPrice" th:value="${flight.getEconomy_price()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="¥" required>
            </div>

            <div>
              <label for="businessPrice" class="block text-sm font-medium text-gray-700 mb-1">商务舱价格</label>
              <input name="businessPrice" type="number" id="businessPrice" th:value="${flight.getBusiness_price()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="¥" required>
            </div>

            <div>
              <label for="firstPrice" class="block text-sm font-medium text-gray-700 mb-1">头等舱价格</label>
              <input name="firstPrice" type="number" id="firstPrice" th:value="${flight.getFirst_price()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="¥" required>
            </div>

            <!-- Services -->
            <div class="md:col-span-2">
              <h3 class="text-lg font-medium text-gray-800 mb-4 border-b pb-2">服务设置</h3>
            </div>

            <div>
              <label for="Baggage" class="block text-sm font-medium text-gray-700 mb-1">行李额</label>
              <input name="Baggage" type="number" id="Baggage" th:value="${flight.getBaggage_limit()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="kg" required>
            </div>

            <div>
              <label for="mealMoney" class="block text-sm font-medium text-gray-700 mb-1">餐食</label>
              <select name="mealMoney" id="mealMoney" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" required>
                <option value="免费餐食" th:selected="${flight.getMeal_money()} == '免费餐食'">免费餐食</option>
                <option value="付费餐食" th:selected="${flight.getMeal_money()} == '付费餐食'">付费餐食</option>
                <option value="无提供" th:selected="${flight.getMeal_money()} == '无提供'">无提供</option>
              </select>
            </div>

            <div>
              <label for="mealType" class="block text-sm font-medium text-gray-700 mb-1">餐食类型</label>
              <select name="mealType" id="mealType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" required>
                <option value="早餐" th:selected="${flight.getMeal()} == '早餐'">早餐</option>
                <option value="午餐" th:selected="${flight.getMeal()} == '午餐'">午餐</option>
                <option value="晚餐" th:selected="${flight.getMeal()} == '晚餐'">晚餐</option>
                <option value="无提供" th:selected="${flight.getMeal()} == '无提供'">无提供</option>
              </select>
            </div>

            <!-- Crew Info -->
            <div class="md:col-span-2">
              <h3 class="text-lg font-medium text-gray-800 mb-4 border-b pb-2">机组人员</h3>
            </div>

            <div>
              <label for="captain" class="block text-sm font-medium text-gray-700 mb-1">机长</label>
              <input name="captain" type="text" id="captain" th:value="${flight.getCaptain()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="assistant_captain" class="block text-sm font-medium text-gray-700 mb-1">副机长</label>
              <input name="assistant_captain" type="text" id="assistant_captain" th:value="${flight.getAssistant_captain()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="chief_attendant" class="block text-sm font-medium text-gray-700 mb-1">乘务长</label>
              <input name="chief_attendant" type="text" id="chief_attendant" th:value="${flight.getChief_attendant()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>

            <div>
              <label for="flight_crew_num" class="block text-sm font-medium text-gray-700 mb-1">机组人员数</label>
              <input name="flight_crew_num" type="number" id="flight_crew_num" th:value="${flight.getFlight_crew_num()}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
            </div>
          </div>

          <div class="mt-8 flex justify-end space-x-3">
            <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition" onclick="window.history.back()">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition">
              保存更改
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</main>

<!-- Footer -->
<footer class="bg-gray-50 mt-12">
  <div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <div class="flex items-center space-x-2 mb-4">
          <i class="fas fa-plane text-2xl text-blue-500"></i>
          <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
        </div>
        <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
      </div>
      <div>
        <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
          <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
          <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
          <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
          <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
          <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
          <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
        <ul class="space-y-2 text-sm text-gray-600">
          <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
          <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
          <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
        </ul>
        <div class="flex space-x-4 mt-4">
          <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
            <i class="fab fa-weixin"></i>
          </a>
          <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
            <i class="fab fa-weibo"></i>
          </a>
          <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
            <i class="fab fa-qq"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
      <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
    </div>
  </div>
</footer>

<script>
  // Flight to modify
  let flightToModify = '';

  // Open delay confirmation modal
  function confirmDelayFlight(flightNumber) {
    flightToModify = flightNumber;
    document.getElementById('flightToDelay').textContent = flightNumber;
    document.getElementById('delayModal').classList.add('open');
  }

  // Open cancel confirmation modal
  function confirmCancelFlight(flightNumber) {
    flightToModify = flightNumber;
    document.getElementById('flightToCancel').textContent = flightNumber;
    document.getElementById('cancelModal').classList.add('open');
  }

  // Open complete confirmation modal
  function confirmCompleteFlight(flightNumber) {
    flightToModify = flightNumber;
    document.getElementById('flightToComplete').textContent = flightNumber;
    document.getElementById('completeModal').classList.add('open');
  }

  // Close modal
  function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('open');
  }

  // Delay flight
  function delayFlight() {
    const reason = document.getElementById('delayReason').value;
    const duration = document.getElementById('delayDuration').value;

    if (!duration || isNaN(duration) || duration <= 0) {
      alert('请输入有效的延误时间');
      return;
    }

    // In a real application, this would make an AJAX call to the backend
    console.log(`航班 ${flightToModify} 已标记为延误，原因: ${reason}, 预计延误: ${duration} 分钟`);

    // Show success message
    alert(`航班 ${flightToModify} 已成功标记为延误`);

    // Close modal and reload page
    closeModal('delayModal');
    window.location.reload();
  }

  // Cancel flight
  function cancelFlight() {
    const reason = document.getElementById('cancelReason').value;

    // In a real application, this would make an AJAX call to the backend
    console.log(`航班 ${flightToModify} 已取消，原因: ${reason}`);

    // Show success message
    alert(`航班 ${flightToModify} 已取消`);

    // Close modal and reload page
    closeModal('cancelModal');
    window.location.reload();
  }

  // Complete flight
  function completeFlight() {
    const actualArrivalTime = document.getElementById('actualArrivalTime').value;

    if (!actualArrivalTime) {
      alert('请输入实际到达时间');
      return;
    }

    // In a real application, this would make an AJAX call to the backend
    console.log(`航班 ${flightToModify} 已完成，实际到达时间: ${actualArrivalTime}`);

    // Show success message
    alert(`航班 ${flightToModify} 已标记为完成`);

    // Close modal and reload page
    closeModal('completeModal');
    window.location.reload();
  }

  // Toggle user dropdown menu
  document.getElementById('user-menu').addEventListener('click', function(event) {
    event.stopPropagation();
    document.getElementById('dropdown-menu').classList.toggle('open');
  });

  // Close dropdown when clicking outside
  document.addEventListener('click', function(event) {
    const dropdown = document.getElementById('dropdown-menu');
    const userMenu = document.getElementById('user-menu');

    if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
      dropdown.classList.remove('open');
    }
  });

  // Form validation
  document.getElementById('editFlightForm').addEventListener('submit', function(e) {
    // Validate form fields here
    const economyPrice = document.getElementById('economyPrice').value;
    const businessPrice = document.getElementById('businessPrice').value;
    const firstPrice = document.getElementById('firstPrice').value;

    if (parseFloat(economyPrice) <= 0 || parseFloat(businessPrice) <= 0 || parseFloat(firstPrice) <= 0) {
      e.preventDefault();
      alert('价格必须大于0');
      return;
    }

    // Additional validation can be added here
  });
</script>
</body>
</html>